<script lang="ts" setup >
import { homeStoriesStore, audioStoriesStore } from "../../store";
import { storeToRefs } from "pinia";
import { ref, nextTick, watch, onUnmounted } from "vue";
import { Api } from "@/apis"
import { ArticleDetailDataType, CommentDetailType, ArticleStoreType } from "@/typing";
import router from "@/router";
import SoundWave from "@/components/icon/SoundWave.vue";
import CommentComponents from "@/components/home/CommentComponents.vue";
import ArticleIcon from "@/components/icon/ArticleIcon.vue";
import { booksImageArr } from "@/utils/imgSrcArr";

const store = homeStoriesStore();
const { articleId, category } = storeToRefs(store)
const { updateComment } = store

const audioStore = audioStoriesStore();
const { isPlay } = storeToRefs(audioStore);
const { updateIsPlayOrPauseStore, updateIsAudioSrcStore, updateShowDiscStore } = audioStore;

const list = ref<ArticleDetailDataType>();
const comment = ref<CommentDetailType>();

let iconImg = ref('');
const isLoading = ref<boolean>(true);
let discTimer = 0;
let discImageIndex = ref<number>(0);
let listObj = ref<ArticleStoreType>();

watch(() => articleId.value, (newValue) => {
    isLoading.value = true;
    render(newValue, category.value);

    setTimeout(() => {
        isLoading.value = false;
    }, 1500);
})

render(articleId.value, category.value);

// 重新渲染列表
async function render(id: string, category: string) {
    let data = await Api.getArticleDetail(id, category);
    list.value = data?.data.data;
    console.log(list.value);

    if (list.value) {
        listObj.value = {
            category,
            id: list.value.id,
            title: list.value.title,
            subTitle: list.value.author_list[0].user_name,
            img_url: list.value.home_image
        }
    }

    let commentData = await Api.getArticleRatings(id, category);
    comment.value = commentData?.data.data;
    updateComment(comment.value?.count || 0, comment.value?.data || []);

    playAudio();

    await nextTick()
}

function goBackFunc() {
    router.push({ name: 'home' })
}

// 改变全局audioIcon的样式
watch(() => isPlay.value, (newValue) => {
    if (newValue) {
        iconImg.value = require('@/assets/audio/feeds_radio_pause.png');
    }
    else {
        iconImg.value = require('@/assets/audio/feeds_radio_play.png');
    }
})

function changeStatus() {
    if (isPlay.value) {
        updateIsPlayOrPauseStore(false);
    }
    else {
        updateIsPlayOrPauseStore(true);
    }
}

function getTime(t: string) {
    const time = t.replaceAll('-', ".");
    return time.substring(0, 16)
}

// 开启全局音频
function playAudio() {
    updateIsPlayOrPauseStore(true);
    updateIsAudioSrcStore(list.value?.audio || '', list.value?.title || '', list.value?.anchor || '');
    updateShowDiscStore(true);
}

setTimeout(() => {
    isLoading.value = false;
}, 1500);

if (isLoading.value) {
    discTimer = setInterval(() => {
        discImageIndex.value = (discImageIndex.value + 1) % booksImageArr.length;
    }, 80);
}
else {
    if (discTimer) {
        // 清除副作用计时器
        clearInterval(discTimer);
    }
}

// 组件将要销毁之前清空计时器
onUnmounted(() => {
    if (discTimer) {
        // 清除副作用计时器
        clearInterval(discTimer);
    }
})

</script>
    
    
<template>
    <div class="radio h-screen w-screen">
        <div v-show="isLoading">
            <div class=" disc-icon h-32 w-36 absolute top-64 left-64"
                :style="{ backgroundImage: `url(${booksImageArr[discImageIndex]})` }">
            </div>
        </div>

        <div v-show="!isLoading">

            <div class="relative">
                <div class="absolute w-screen p-5 flex items-center justify-between">
                    <img class="w-6 h-10" src="@/assets/card/h5_qr_back.png" alt="back" @click="goBackFunc">
                    <ArticleIcon v-if="(listObj !== undefined)" :obj="listObj" />
                </div>
                <div class="bg-img">
                    <div class="absolute bottom-16 ml-14 flex w-10/12 items-center">
                        <SoundWave :playState="isPlay" />
                        <img class="w-16 h-16 mx-12" :src="iconImg || require('@/assets/audio/feeds_radio_play.png')"
                            alt="img" @click="changeStatus">
                        <SoundWave :playState="isPlay" />
                    </div>
                </div>
            </div>

            <div class="px-8">
                <div class="my-12 text-4xl font-bold">{{ list?.title }}</div>
                <div class="flex justify-between py-5 ">
                    <div>{{ list?.json_content.simple_author[0] }}</div>
                    <div>{{ list?.json_content.simple_author[1] }}</div>
                </div>
            </div>

            <div v-html="list?.json_content.content" class="mt-12 content-html "> </div>
            <div class="m-8">{{ list?.json_content.editor }}</div>

            <div class="flex p-8 bg-gray-50">
                <img class="w-28 h-28 mr-5" src="@/assets/audio/banner_fm_1125_600_2.jpg" alt="img">
                <div>
                    <div class="text-3xl mb-5 mt-3">电台栏目</div>
                    <div class="text-gray-400">“讲述生活，则声音没有不和谐的。”</div>
                </div>
            </div>

            <div class="px-8 mb-16">
                <div class="text-2xl w-24 my-8 py-3 border-b-4 border-black">主播</div>
                <div class="flex items-center">
                    <img class="w-20 h-20 mr-5 rounded-full" :src="list?.author_list[0].web_url" alt="img">
                    <div class="w-8/12">
                        <div class="text-3xl my-2">{{ list?.json_content.simple_author[0] }}</div>
                        <div class="text-gray-400">{{ list?.author_list[0].summary }}</div>
                    </div>
                    <van-button size="small" type="default">关注</van-button>
                </div>
            </div>

            <div class="px-8 mt-8">
                <div class="text-2xl w-24 py-3 border-b-4 border-black">评论列表</div>
                <div v-for="(l, index) in comment?.data " :key="index" class="border-b py-5">
                    <div class="flex items-center justify-between mb-3 mt-5 ">
                        <div class="flex ">
                            <img :src="l.user.web_url" alt="img" class=" w-10 h-10 mr-3 rounded-full ">
                            <div class="text-2xl text-gray-400 ">{{ l.user.user_name }}</div>
                        </div>
                        <div class="text-2xl text-gray-500 "> {{ getTime(l.created_at) }}</div>
                    </div>
                    <div class="text-content p-5 ">{{ l.content }}</div>

                    <div class="flex justify-end items-center">
                        <img class="w-8 h-8" src="@/assets/card/bottom_comment.png" alt="img">
                        <img class="w-8 h-8 ml-5 mr-3 " src="@/assets/card/comment_laud.png" alt="img">
                        <div class="text-gray-400 mr-8">{{ l.praisenum }}</div>
                    </div>
                </div>
            </div>
        </div>

        <CommentComponents />
    </div>
</template>

<style>
.bg-img {
    width: 100vw;
    height: 250px;
    background-image: url('@/assets/audio/banner_fm_1125_600_2.jpg');
    background-size: 480px;
    background-position: center;
    background-repeat: no-repeat;
}

.content-html p {
    line-height: 25px;
    margin-bottom: 15px;
    padding: 0 15px;
}

.radio img {
    object-fit: cover;
}
</style>